<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../js/jquery.js"></script>
<script type="text/javascript" src="../../js/api.js"></script>
<script type="text/javascript" src="../../js/axios.js"></script>
<script type="text/javascript" src="../../layui/layui.js"></script>
<link href="../../layui/css/layui.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>采购管理</li>
    <li>商品管理</li>
    <li>基本内容</li>
  </ul>
</div>
<div class="rightinfo">
  <form action="" method="post" id="conn">
    <ul class="tools">
      <li> 品牌名称:
        <select name="brandName" id="brand">
<!--          <option>请选择</option>-->
<!--          <option>联想</option>-->
<!--          <option>海尔</option>-->
        </select>
      </li>
      <li> 商品类型:
        <select name="typeName" id="type">
<!--          <option>请选择</option>-->
<!--          <option>笔记本</option>-->
<!--          <option>电视机</option>-->
        </select>
      </li>
      <li> 商品型号:
        <input type="text" name="productModel"/>
      </li>
      <li> 状态：
        <select name="productStatus">
          <option value="0">请选择</option>
          <option value="1">可用</option>
          <option value="2">不可用</option>
        </select>
      </li>
      <li class="subBut" id="search"><img src="../../images/t06.png" />查询</li>
      <li class="subBut" onclick="window.location.href='productAdd.html'"><img src="../../images/t01.png" />添加</li>
    </ul>
    <table class="tablelist">
      <thead>
        <tr>
          <th>序号</th>
          <th>品牌名称</th>
          <th>商品类型</th>
          <th>商品型号</th>
          <th>厂商</th>
          <th>单位</th>
          <th>单价</th>
          <th>状态</th>
          <th width="150px">创建时间</th>
          <th>创建人</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody id="tList">
<!--        <tr>-->
<!--          <td>1</td>-->
<!--          <td>联想</td>-->
<!--          <td>笔记本</td>-->
<!--          <td>X260</td>-->
<!--          <td>台</td>-->
<!--          <td>可用</td>-->
<!--          <td>2013-09-09 15:05:05</td>-->
<!--          <td>管理员</td>-->
<!--          <td>-->
<!--            <a href="productUpdate.html" class="tablelink">修改</a>-->
<!--            <a href="javascript:void(0)" class="tablelink" onclick="tipOpen('是否确认注销此条信息？')">注销</a>-->
<!--          </td>-->
<!--        </tr>-->
<!--        <tr>-->
<!--          <td>2</td>-->
<!--          <td>海尔</td>-->
<!--          <td>电视机</td>-->
<!--          <td>55寸4K液晶</td>-->
<!--          <td>台</td>-->
<!--          <td>不可用</td>-->
<!--          <td>2013-09-09 15:05:05</td>-->
<!--          <td>管理员</td>-->
<!--          <td>-->
<!--            <a href="productUpdate.html" class="tablelink">修改</a>-->
<!--            <a href="javascript:void(0)" class="tablelink" onclick="tipOpen('是否确认恢复此条信息？')">恢复</a>-->
<!--          </td>-->
<!--        </tr>-->
      </tbody>
    </table>
    <div class="pagin" id="page">
<!--      <div class="message">共<i class="blue">1256</i>条记录，当前显示第&nbsp;<i class="blue">2&nbsp;</i>页</div>-->
<!--      <ul class="paginList">-->
<!--        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>-->
<!--        <li class="paginItem"><a href="javascript:;">1</a></li>-->
<!--        <li class="paginItem current"><a href="javascript:;">2</a></li>-->
<!--        <li class="paginItem"><a href="javascript:;">3</a></li>-->
<!--        <li class="paginItem"><a href="javascript:;">4</a></li>-->
<!--        <li class="paginItem"><a href="javascript:;">5</a></li>-->
<!--        <li class="paginItem more"><a href="javascript:;">...</a></li>-->
<!--        <li class="paginItem"><a href="javascript:;">10</a></li>-->
<!--        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>-->
<!--      </ul>-->
    </div>
  </form>
  <!-- 提示框 -->
  <div id="tip" class="tip">
    <div class="tiptop"><span>提示信息</span><a onclick="tipClose()"></a></div>
    <div class="tipinfo"> <span><img src="../../images/ticon.png" /></span>
      <div class="tipright">
        <p></p>
        <cite>如果是请点击确定按钮 ，否则请点取消。</cite> </div>
    </div>
    <div class="tipbtn">
      <input name="" type="button"  class="sure" value="确定" />
      &nbsp;
      <input name="" type="button"  class="cancel" value="取消" onclick="tipClose()" />
    </div>
  </div>
</div>
<script type="text/javascript">
	$('.tablelist tbody tr:odd').addClass('odd');

    let pageSize=5;
    let pageNum=1;
    let conn=''
    $(function () {
      loadPurchase(pageNum, pageSize,conn)
      brandname()
      typename()
    })

    function tipOpen(content,productId,productStatus) {
        $(".tipright p").text(content);
        $("#tip").fadeIn(200);
        $('.sure').unbind('click').click(function () {
            axiosJson(
                'get',//提交方法
                '/purchase/lorProduct',//提交地址
                null,
                {productId: productId, productStatus: productStatus}
            ).then(() => {
                loadPurchase(pageNum, pageSize,conn);
                tipClose();
            })
        })
    }
    function tipClose() {
        $("#tip").fadeOut(200);
    }

    //查询点击事件
    $('#search').click(function () {
      conn = $('#conn').serializeArray()
      loadPurchase(1,pageSize,conn)
    })

    //品牌信息
    function brandname() {
      axiosJson(
              'get',//提交方法
              '/purchase/brandName',//提交地址
              null,
              null
      ).then((res) => {
        let audit = res.data.resultData
        let str='<option value="">请选择</option>'
        for (let i=0;i<audit.length;i++){
          str+='<option>'+audit[i]+'</option>'
        }
        $('#brand').html(str)
      })
    }

    //商品类型信息
    function typename() {
      axiosJson(
              'get',//提交方法
              '/purchase/typeName',//提交地址
              null,
              null
      ).then((res) => {
        let audit = res.data.resultData
        let str='<option value="">请选择</option>'
        for (let i=0;i<audit.length;i++){
          str+='<option>'+audit[i]+'</option>'
        }
        $('#type').html(str)
      })
    }

    //加载数据
    function loadPurchase(pageNum, pageSize,conn) {
      axiosJson(
              'get',//提交方法
              '/purchase/productPage',//提交地址
              conn,
              {pageNum: pageNum, pageSize: pageSize}
      ).then((res) => {
        // console.log(res);
        // alert('提交成功！');
        writeData(res)
      })

    }

    //写数据
    function writeData(res) {
      let str = ''
      let audit = res.data.resultData.data  //pageModel里purchase的数据
      let page = res.data.resultData   //查看pageModel 的属性值
      // console.log(page)
      console.log(audit)
      for (let i=0;i<audit.length;i++){
        let status='';
        let lor='';
        if (audit[i].productStatus==1){
          status='可用';
          lor='<a href="javascript:void(0)" class="tablelink" onclick="tipOpen(\'是否确认注销此条信息？\','+audit[i].productId+','+audit[i].productStatus+')">注销</a>\n';
        }else {
          status='不可用';
          lor='<a href="javascript:void(0)" class="tablelink" onclick="tipOpen(\'是否确认恢复此条信息？\','+audit[i].productId+','+audit[i].productStatus+')">恢复</a>\n';
        }
        str+='<tr>\n' +
                '          <td>'+((page.pageNum-1)*page.pageSize+i+1)+'</td>\n' +
                '          <td>'+audit[i].type.brand.brandName+'</td>\n' +
                '          <td>'+audit[i].type.typeName+'</td>\n' +
                '          <td>'+audit[i].productModel+'</td>\n' +
                '          <td>'+audit[i].firm.firmName+'</td>\n' +
                '          <td>'+audit[i].productUnit+'</td>\n' +
                '          <td>'+audit[i].productPrice+'</td>\n' +
                '          <td>'+status+'</td>\n' +
                '          <td>'+audit[i].createTime+'</td>\n' +
                '          <td>'+audit[i].creator.uName+'</td>\n' +
                '          <td>\n' +
                '            <a href="productUpdate.html?id='+audit[i].productId+'" class="tablelink">修改</a>\n' +
                lor+
                '          </td>\n' +
                '        </tr>'
      }


      $('#tList').html(str);
      $('.tablelist tbody tr:odd').addClass('odd');

      pageNum=page.pageNum;
      $('#totalCount').html(page.totalCount); //添加总记录数
      $('#pageNum').html(page.pageNumber) ;  //当前所在页
      console.log(page);
      //页码显示
      layui.use("laypage", function () {
        var laypage = layui.laypage;
        laypage.render({
          elem: "page",                       //页码所放的位置 id属性
          count: page.totalCount,             //总记录数
          theme: '#eb5409',
          limit: page.pageSize,               //每页的数据
          limits: [5, 8, 12],                 //每页可访问的数据量
          curr: page.pageNum,                 //当前页
          layout: ['prev', 'page', 'next', 'limit', 'count','skip'],
          jump: function (obj, first) {
            page.pageNum = obj.curr
            pageSize = obj.limit
            if (!first) {
              loadPurchase(page.pageNum, pageSize,conn);
            }
          }
        })
      })
    }

</script>
</body>
</html>
